<template>
    <div>
        <div class="swiper-container" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="images in item.urlFulls">
                    <img :src="images" alt="">
                </div>
                <!--<div class="swiper-slide">-->
                <!--<img src="@/assets/travel/images/d_img.jpg" alt=""></a>-->
                <!--</div>-->
                <!--<div class="swiper-slide">-->
                <!--<img src="@/assets/travel/images/d_img02.jpg" alt=""></a>-->
                <!--</div>-->
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <dl class="detail01">
            <dt> {{item.title}}</dt>
            <dd>{{item.openTime}}</dd>
            <dd>以实际情况为准</dd>
        </dl>
        <div class="line10"></div>
        <ul class="detail02">
            <li>
                <img src="@/assets/travel/images/tel01.png" alt="">电话：
                <a  :href="'tel:'+ item.telNo" style="color: #1ec8e2;">{{item.telNo}}</a>
            </li>
            <li>
                <img src="@/assets/travel/images/dz.png" alt=""> 地址：{{item.address}}
            </li>
        </ul>
        <div class="line10"></div>
        <div class="detail03">
            <h1>简介</h1>
            <p v-html="item.content"></p>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';

    export default {
        name: "image-detail",
        props: ['item'],
        updated() {
            new Swiper('#banner', {
                loop: true,
                speed: 1000,
                centeredSlides: true,
                autoplay: 2000,
                pagination: '.swiper-pagination',
            })
        }
    }
</script>

<style>
    @import "../assets/travel/css/base.css";
    @import "../assets/travel/css/other.css";
</style>